<template>
  <CDialog title="选择部件" v-model:visible="dialogVisible" size="default" :footer="false">
    <div style="height: 70vh">
      <CTable
        :pagination="false"
        :loadData="loadData"
        border
        :extraTableOption="{
          treeConfig: tableConfig.treeConfig,
          scrollY: { enabled: true, gt: 50, oSize: 30, rSize: 50 }, // gt50数量超过50开启虚拟滚动
          maxHeight: '100%',
          rowConfig: { height: 44 }
        }"
        rowKey="nodeNo"
        cellHeightSize="small"
        :tableFieldsSetting="tableFieldsSetting"
      >
        <vxe-column
          show-overflow="tooltip"
          field="nodeName"
          :minWidth="300"
          title="部件名称"
          tree-node
        >
        </vxe-column>
        <template #op="{ scope }">
          <el-button text type="primary" @click="handleSelect(scope.row)">选择</el-button>
        </template>
      </CTable>
    </div>
  </CDialog>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits, computed, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { CTable, TableFieldsSettingType } from '@/components/CTable';
import { getListBomTree } from '@/apis/pcf/myModel/modelDetail';
import { VxeTablePropTypes } from '@xfchenju/vxe-table';
import type { GetListBomTreeResult } from '@/apis/pcf/myModel/model/modelDetailModel';

interface FlowDialogProps {
  visible: boolean;
  modelNo: string;
  nodeNo?: string;
}
const props = withDefaults(defineProps<FlowDialogProps>(), {});
const emits = defineEmits(['update:visible', 'change']);

const dialogVisible = computed({
  get: () => {
    return props.visible;
  },
  set: (value: boolean) => {
    emits('update:visible', value);
  }
});

/**
 * 加载数据
 */
function loadData() {
  const nodeNo = props.nodeNo || '-1';
  // loading.value = true;
  return getListBomTree(props.modelNo, nodeNo).then(res => {
    return {
      records: res,
      total: res.length
    };
  });
}

const tableFieldsSetting: TableFieldsSettingType[] = [
  {
    title: '操作',
    field: 'op',
    slot: 'op',
    align: 'center',
    width: 80
  }
];

const tableConfig = reactive({
  treeConfig: {
    transform: true,
    rowField: 'nodeNo',
    parentField: 'parentNodeNo',
    iconOpen: 'c-mian-xia iconfont',
    iconClose: 'c-mian-you iconfont',
    lazy: true,
    hasChild: 'hasChildren',
    loadMethod({ row }) {
      // 异步加载子节点
      return getListBomTree(props.modelNo, row.nodeNo);
    }
  } as VxeTablePropTypes.TreeConfig
});
function handleSelect(row: GetListBomTreeResult) {
  console.log('handleSelect', row);
  emits('change', row);
}
</script>
<style lang="scss" scoped>
:deep(.vxe-table) {
  .vxe-tree--btn-wrapper {
    top: 7px;
    .vxe-tree--node-btn {
      color: #435970 !important;
    }
  }
}
</style>
